<template>
  <section class="sync-wrap">
    <div class="condition">
      <div class="item" v-for="item in options" :key="item.key">
        <h2>{{ item.label }}</h2>
        <div class="options">
          <div v-for="o in item.data" :key="o.id" :class="{ is__checked: formGroup[item.key] == o.id }" @click="formGroup[item.key] = o.id">
            {{ o.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <el-skeleton :loading="loading">
        <template v-if="!dataset.length">
          <cus-empty  />
        </template>
        <template v-else>
          <div class="item" v-for="data in dataset" :key="data.id">
            <img src="/src/assets/one-prepare/paper-icon.png" alt="试卷" />
            <p>{{ data.title }}</p>
            <div class="actions">
              <a @click="preview(data)">预览</a>
              <el-button type="text" @click="addData(data)">加入</el-button>
            </div>
          </div>
        </template>
      </el-skeleton>
      <el-pagination
          v-show="dataset.length"
          v-model:current-page="paginationData.current"
          v-model:page-size="paginationData.size"
          :total="paginationData.total"
          @current-change="request()"
          layout="prev, pager, next"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import axios from "axios";
import {AxResponse} from "@/core/axios";
import {useStore} from "vuex";
import $, {useState, http} from "$";
import {ElLoading} from "element-plus";

const store = useStore()
let [loading, setLoading] = useState(false);
const userId = store.getters.userInfo.user.id
const formGroup = reactive({

})
watch(formGroup, () => request(true))
const paginationData = reactive({
  current: 1,
  size: 10,
  total: 0
})
const props = defineProps(['subjectCode', 'addData'])
const options = ref([
  { label: '类别', key: 'exerciseType', data: [ { name: '全部', id: null }, { name: '进门测', id: 1 }, { name: '过手练', id: 2 }, { name: '出门测', id: 3 }, { name: '课堂巩固', id: 4 } ] },
  { label: '年级', key: 'gradeId', data: [] },
  { label: '年份', key: 'year' },
  { label: '学期', key: 'season'},
  { label: '教材版本', key: 'teacherBookVersionId' },
  { label: '班型', key: 'courseTypeId' }
])

Promise.all([
  axios.post<null, AxResponse>('/permission/user/userDataRules', { userId, subjectCode: props.subjectCode }),
  axios.post<null, AxResponse>('/system/dictionary/queryDictByCodes', { typeCodesStr: 'YEAR,QUES_SOURCE,QUES_CATEGORY,STU_TYPE' })
]).then(list => {
  list.map(res => {
    res.json?.years && (options.value[2].data = [{ name: '全部', id: null }, ...(res.json.years.map(i => ({ name: i.name, id: i.id }))) ]);
    res.json?.grades && (options.value[1].data = [{ name: '全部', id: null }, ...res.json.grades ]);
    res.json?.bookVersions && (options.value[4].data = [{ name: '全部', id: null }, ...res.json.bookVersions ]);
    res.json?.courseTypes && (options.value[5].data = [{ name: '全部', id: null }, ...res.json.courseTypes ]);
    res.json?.terms && (options.value[3].data = [{ name: '全部', id: null }, ...res.json.terms ]);
  });
})
let [dataset, setDataset] = useState([]);
async function request (clearPage?) {
  setLoading(true);
  if (clearPage) paginationData.current = 1;
  let res = await http.post("/tiku/paper/queryExercise", { ...formGroup, current: paginationData.current, size: paginationData.size, subjectId: props.subjectCode });
  setDataset(res.json.records);
  paginationData.total = res.json.total
  paginationData.current = res.json.current;
  paginationData.size = res.json.size;
  setLoading(false);
};
request()
function preview(data) {
  if (data.filePath) {
    const loading = ElLoading.service({
      lock: true,
      background: "rgba(255, 255, 255, .7)",
      text: "加载中...",
    });
    let src = `${$.utils.generatBasePath()}furl=${
        import.meta.env.VITE_APP_BASE_URL
    }${data.filePath}`;
    let closeBtn = $.element("div", {
      className: "el-icon-close",
      style: {
        width: "36px",
        height: "36px",
        lineHeight: "36px",
        textAlign: "center",
        background: "#fff",
        borderRadius: "50%",
        fontSize: "24px",
        position: "fixed",
        top: "40px",
        right: "40px",
        zIndex: "10",
        cursor: "pointer",
      },
      on: {
        click: () => {
          container.remove();
        },
      },
    });
    let iframe = $.element("iframe", {
      attrs: { src, width: "100%", height: "100%" },
      style: { background: "#f9f9f9" },
    });
    iframe.onload = loading.close;
    let container = $.element(
        "div",
        {
          style: {
            width: "100%",
            height: "100%",
            position: "absolute",
            top: "0",
            left: "0",
            zIndex: "3200",
          },
        },
        [closeBtn, iframe]
    );
    document.body.appendChild(container);
  } else {
    window.open(`./#/test-paper-edit/true/${data.id}`);
  }
};


</script>

<style lang="scss" scoped>
.sync-wrap {
  display: flex;
  flex: 1 1 65px;
  padding: 17px 15px;
  .condition {
    width: 265px;
    margin-right: 15px;
    padding: 18px 0 18px 18px;
    border-radius: 4px;
    border: 1px solid #dcdee3;
    background: #f5f7fa;
    .item {
      &:not(:last-child) {
        margin-bottom: 16px;
      }
      .options {
        display: flex;
        flex-wrap: wrap;
        margin-top: 4px;
        & > div {
          height: 28px;
          padding: 0 12px;
          margin: 0 8px 8px 0;
          color: #6c6c6c;
          line-height: 28px;
          border-radius: 14px;
          cursor: pointer;
          &.is__checked {
            color: #fff;
            background: #faad14;
          }
        }
      }
    }
  }
  .main {
    flex: 1 1 265px;
    overflow: auto;
    .item {
      display: flex;
      padding: 12px 10px;
      border-radius: 4px;
      border: solid 1px #dcdee3;
      transition: all 0.25s;
      cursor: pointer;
      &:hover {
        background: #f5f7fa;
        border-color: #f5f7fa;
      }
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      & > img {
        display: block;
        width: 42px;
        height: 42px;
        margin-right: 10px;
      }
      & > p {
        width: 240px;
        line-height: 42px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .actions {
        width: 70px;
        margin-left: auto;
        line-height: 42px;
        a {
          margin-right: 12px;
          color: #382a74;
        }
      }
    }
    .el-pagination {
      margin-top: 30px;
    }
  }

}
</style>
